<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bd {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div id="app">

    <my-com></my-com>
    <hr>
    <i-show></i-show>

</div>

<template id="mycom">
    <div>
        <div style="color: #f00;">{{ title }}</div>
        <p style="background-color: #ccc;">我是p标签</p>
        <p>n: {{ n }}</p>
        <button @click="clickHandler">点击我</button>
    </div>
</template>

<template id="myshow">
    <div class="bd">
        <div>我是 show 组件</div>
    </div>
</template>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.js"></script>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">

    const vm = new Vue({
        el: '#app',
        data: {
            n: 1,
        },
        // 在实例化的时候的参数列表里面的 components 可以定义组件
        components: {
            'my-com': {
                // 对于组件的数据，我们需要把 data 定义为方法
                // 方法的返回值作为组件的数据
                data() {
                    return {
                        'title': '我是mycom组件',
                        n: 1,
                    }
                },
                beforeCreate() {

                    console.log('com beforeCreate');

                },
                created() {
                    console.log('com created');
                },
                beforeMount() {
                    console.log('com beforeMount');
                },
                mounted() {
                    console.log('com mounted');
                },
                beforeUpdate() {
                    console.log('com beforeUpdate');
                },
                updated() {
                    console.log('com updated');
                },
                template: `#mycom`,
                methods: {
                    clickHandler() {
                        this.n++;
                        // alert('clickHandler');
                    }
                }

            },
            'i-show': {
                template: '#myshow',
            }

        }

    })

</script>

</html>
